<template>
<div>
  <div class="min">
    <h2 class="musicTitle">音乐排行榜</h2>
    <div class="musicMid">

      <ul >
        <div v-if="visable">
          <a-spin tip="Loading...">
            <div class="spin-content">
            </div>
          </a-spin>
        </div>
        <li v-for="(item,index) in list" :key="index" v-else >
          <img :src="item.album_1000_1000" alt="">
          <nav>{{item.title }}</nav>
          <div >

              <a-icon type="play-circle" v-if="item.song_id != songid" @click="play(item.song_id)" class="audio1"/>
              <a-icon type="pause-circle" v-else class="audio1" @click="paused"/>

<!--            <audio :src="song" controls preload="none" @click="play(index)" class="audio" ></audio>-->
          </div>
          <span>{{index+1}}</span>
        </li>
        <button v-if="moreShowBoolen" @click="moreShow" style="margin-left: 90%">更多</button>
        <div v-else>已无更多</div>
      </ul>
    </div>
    <div class="nav">
      <h4>{{title}}</h4>
      <div style="height: 30px;" >
<!--        <a-icon type="double-left" @click="left"/>-->

          <audio  :src="song" autoplay controls @play="autopl" @pause="autopa"></audio>
      </div>
<!--        <a-icon type="double-right" @click="right"/>-->

    </div>
    <div style="height: 76px;"></div>
  </div>
</div>
</template>

<script>

import {getMusicPlay, getSongList} from "@/api/api";

export default {

  name: "music",
  data() {
    return {
      title: '网易云',
      isPlay: true,
      list: [],
      num: '',
      sum:'',
      song: '',
      songid: 0,
      id:0,
      visable:true,
      nowPage:1,
      moreShowBoolen:false
    }
  },
  methods: {
    list1(id){
      console.log(id)
    },
    play(id) {
      this.songid = id;
      this.id = id
      getMusicPlay(id).then(res=>{
        console.log(res)
        this.song=res.bitrate.show_link
        this.title = res.songinfo.title
      })
      let a  = document.getElementsByTagName('audio')[0]
      if(a.paused){
        a.play()
      }
      else{
        a.pause()
      }
    },
    paused(){
      this.songid = 0;
      let a  = document.getElementsByTagName('audio')[0]
      if(a.paused){
        a.play()
      }
      else{
        a.pause()
      }
      console.log(a)
    },
    autopa(){
      this.songid=0
    },
    autopl(){
      this.songid=this.id
    },
    // 加载更多
    init() {

      getSongList(this.type = '1', this.size = '100', this.method).then(res => {
        this.visable = false
        console.log(res)
        if (res.song_list.length <= 20) {
          this.list = res.song_list
          this.moreShowBoolen = false
        } else {
          this.list = res.song_list.slice(0, 20)
          this.moreShowBoolen = true
        }
      })
    },
    moreShow() {
      getSongList(this.type = '1', this.size = '100', this.method).then(res => {
        this.list = this.list.concat(res.song_list.slice(this.nowPage * 20, (this.nowPage + 1) * 20))
        this.nowPage++
        if (res.song_list.length >= this.nowPage * 20) {
          this.moreShowBoolen = true
        } else {
          this.moreShowBoolen = false
        }
      })
    },
  },

   mounted() {
    this.init()
     window.addEventListener('scroll',()=>{
       const scrollY = document.documentElement.scrollTop||document.body.scrollTop
       const vh  = document.compatMode==='CSS1Compat'?document.documentElement.clientHeight:document.body.clientHeight
       const allHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)
       if(scrollY+vh>=allHeight){
         this.scrollMore()
       }
     })
   }
}
</script>

<style scoped lang="less">
.min{
  background-image: url("../assets/img/timg.jpg");
}
.musicTitle {
    height: 40px;
    line-height: 40px;
    background: #00aaff;
    color: white;
    text-align: center;
  }
  .musicMid{
    height: calc(100vh - 190px);
    //background: #42b983;
    overflow: scroll;
    ul{
      //overflow: scroll;
      li{
        height: 80px;
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        line-height: 80px;
        img{
          width: 30%;
        }
        nav{
          width: 30%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div{
          width: 26px;
          position: relative;
          //overflow: hidden;
          height: 26px;
          border-radius: 50%;
          margin-top: 24px;
          .audio1{
            position: absolute;
            top: 10px;
            //left: -10px;
          }
        }
      }
    }
  }
  .nav {
    height: 64px;
    background: rgba(0,200,200,0.3);

    h4{
      text-align: center;
    }
    div{
      width: 30px;
      height: 30px;
      margin: auto;
      position: relative;
      background: #00aaff;
      overflow: hidden;
      border-radius: 50%;
      audio{
        position: absolute;
        top: -12px;
        left: -12px;

      }
    }

  }

  .spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
  }
</style>